<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/apps/css/bootstrap.min.css">
    <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.min.css">
    <style>
        .user-avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid #f8f9fa;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .user-info-card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .user-info-card:hover {
            transform: translateY(-5px);
        }

        .info-label {
            font-weight: bold;
            color: #6c757d;
        }

        .info-value {
            font-size: 2rem;
            font-weight: bold;
        }

        .user-name {
            font-size: 2.5rem;
            font-weight: bold;
            margin-top: 15px;
        }

        .user-id {
            font-size: 1.2rem;
            color: #6c757d;
        }

        .user-roles {
            margin-top: 10px;
        }

        .role-badge {
            font-size: 1rem;
            margin-right: 5px;
            margin-bottom: 5px;
            padding: 8px 12px;
        }

        .currency-icon {
            font-size: 1.5rem;
            margin-right: 10px;
            vertical-align: middle;
        }

        .currency-card {
            border-radius: 10px;
            transition: transform 0.2s;
        }

        .currency-card:hover {
            transform: scale(1.03);
        }

        .tubay-card {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
        }

        .integral-card {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            color: white;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card user-info-card">
                    <div class="card-body p-5 text-center">
                        <div class="mb-4">
                            {{#if userInfo.avatar}}
                            <img src="{{userInfo.avatar}}" alt="用户头像" class="user-avatar">
                            {{else}}
                            <div class="user-avatar d-flex align-items-center justify-content-center bg-light">
                                <i class="fas fa-user fa-4x text-secondary"></i>
                            </div>
                            {{/if}}
                        </div>

                        <h1 class="user-name">{{userInfo.real_name}}</h1>
                        <p class="user-id">用户ID: {{userInfo.uid}}</p>

                        <div class="user-roles">
                            {{#if userInfo.roles}}
                                {{#each (split userInfo.roles " ")}}
                                <span class="badge bg-primary role-badge">{{this}}</span>
                                {{/each}}
                            {{else}}
                                <span class="badge bg-secondary role-badge">普通用户</span>
                            {{/if}}
                        </div>

                        <div class="row mt-5">
                            <div class="col-md-6 mb-4">
                                <div class="card currency-card tubay-card">
                                    <div class="card-body p-4">
                                        <div class="d-flex align-items-center mb-3">
                                            <i class="fas fa-coins currency-icon"></i>
                                            <h3 class="mb-0">图贝余额</h3>
                                        </div>
                                        <div class="info-value">{{userInfo.now_money}}</div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <div class="card currency-card integral-card">
                                    <div class="card-body p-4">
                                        <div class="d-flex align-items-center mb-3">
                                            <i class="fas fa-gem currency-icon"></i>
                                            <h3 class="mb-0">金豆余额</h3>
                                        </div>
                                        <div class="info-value">{{userInfo.integral}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/apps/js/bootstrap.bundle.min.js"></script>
</body>
</html> 